<template>
    <div id="app">
        <el-carousel :interval="3000" arrow="always">
            <el-carousel-item v-for="(img,index) in imgList" :key="index">
                <img style="width: 100%;height: inherit;" v-bind:src="img.url">
            </el-carousel-item>
        </el-carousel>
        <span class="demonstration">版权保护中心著作权登记系统快速入口</span>
        <el-divider></el-divider>
        <span>我要登记</span>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="8">
                <el-card :body-style="{ paddingLeft: '30px' }" shadow="hover">
                    <img style="padding-left:20%;" src="../assets/index-picture/软件登记.png" class="image">
                    <div>
                        <el-link href="/#/SoftwareRegister">软件登记</el-link>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <img style="padding-left:20%;" src="../assets/index-picture/作品登记.png" class="image">
                    <div>
                        <el-link href="/#/SoftwareRegister">作品登记</el-link>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <img style="padding-left:20%;" src="../assets/index-picture/dci登记.png" class="image">
                    <div>
                        <el-link href="http://www.ccopyright.com.cn/index.php?optionid=980" target="_blank">DCI登记</el-link>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <span>登记指南</span>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="8">
                <el-card shadow="hover">
                    <img style="padding-left:20%;" src="../assets/index-picture/软件指南.png" class="image">
                    <div>
                        <el-link href="http://www.ccopyright.com.cn/index.php?optionid=1030" target="_blank">软件指南</el-link>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <img style="padding-left:20%;" src="../assets/index-picture/作品指南.png" class="image">
                    <div>
                        <el-link href="http://www.ccopyright.com.cn/index.php?optionid=1031" target="_blank">作品指南</el-link>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <img style="padding-left:20%;" src="../assets/index-picture/dci指南.png" class="image">
                    <div>
                        <el-link href="http://www.ccopyright.com.cn/index.php?optionid=1032" target="_blank">DCI指南</el-link>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <div>
            <span>关于我们</span>
            <el-divider direction="vertical"></el-divider>
            <span>免责声明</span>
            <el-divider direction="vertical"></el-divider>
            <span>隐私保护</span>
            <el-divider direction="vertical"></el-divider>
            <a href="http://www.ccopyright.com.cn/" target="_blank">友情链接</a>
        </div>
        <el-divider></el-divider>
    </div>
</template>
<script>
    export default {
        name: "welcome",
        data() {
            return {
                imgList: [
                    {url: require('../assets/index1.png')},
                    {url: require('../assets/banner.png')},
                    {url: require('../assets/index2.png')},
                ]
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #0c64d2;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .demonstration {
        font-size: 20px;
        display: flex;
        font-weight:bold;
        padding-left: 38%;
        color: #ff5502;
        padding-top: 20px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #1a64d0;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #0768dc;
    }
    .el-row {
        padding-left: 15%;
        padding-right: 15%;
    }

    .el-card {
        height: 150px;
        width: 150px;
    }
    .el-link{
        display: flex;
        align-items: center;
        padding-top: 20%;
    }

</style>